---
type: tutorial
title: Создаем свою собственную Шапку
description: >-
  Учебное пособие: Создайте свой первый блог на Astro —

  Используйте все, что вы узнали до сих пор, чтобы создать шапку с отзывчивой навигацией
i18nReady: true
---
import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Поскольку ваш сайт будет просматриваться на разных устройствах, пришло время создать постраничную навигацию, которая сможет реагировать на разные размеры экрана!

<PreCheck>
  - Создать шапку для вашего сайта, которая содержит компонент навигации
  - Сделать компонент навигации адаптивным
</PreCheck>


<Box icon="puzzle-piece">

## Попробуйте сами — Создайте новый компонент Header

<Steps>
1. Создайте новый компонент Header. Импортируйте и используйте существующий компонент `Navigation.astro` внутри элемента `<nav>`, который находится внутри элемента `<header>`.

    <details>
    <summary>Покажите мне код!</summary>

    Создайте файл с именем `Header.astro` в `src/components/`
    ```astro title="src/components/Header.astro"
    ---
    import Navigation from './Navigation.astro';
    ---
    <header>
      <nav>
        <Navigation />
      </nav>
    </header>
    ```

    </details>
</Steps>

</Box>




<Box icon="puzzle-piece">

## Попробуйте сами — Обновите ваши страницы

<Steps>
1. На каждой странице замените ваш существующий компонент `<Navigation/>` на вашу новую шапку.

    <details>
    <summary>Покажите мне код!</summary>

    ```astro title="src/pages/index.astro" ins={3,18} del={2,17}
    ---
    import Navigation from '../components/Navigation.astro';
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "Home Page";
    ---
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
      </head>
      <body>
        <Navigation />
        <Header />
        <h1>{pageTitle}</h1>
        <Footer />
      </body>
    </html>
    ```
    </details>

2. Проверьте предварительный просмотр в браузере и убедитесь, что ваша шапка отображается на каждой странице. Пока она не выглядит иначе, но если вы проверите предварительный просмотр с помощью инструментов разработчика, вы увидите, что у вас теперь есть элементы, такие как `<header>` и `<nav>` вокруг ваших навигационных ссылок.
</Steps>

</Box>

## Добавьте отзывчивые стили

<Steps>
1. Обновите `Navigation.astro` классом CSS для управления навигационными ссылками. Оберните существующие навигационные ссылки в `<div>` с классом `nav-links`.

    ```astro title="src/components/Navigation.astro" ins={3,7}
    ---
    ---
    <div class="nav-links">
      <a href="/">Home</a>
      <a href="/about">About</a>
      <a href="/blog">Blog</a>
    </div>
    ```

2. Скопируйте приведенные ниже стили CSS в файл `global.css`. Эти стили:

    - Стилизируют и позиционируют навигационные ссылки для мобильных устройств
    - Включают класс `expanded`, который можно переключать для отображения или скрытия ссылок на мобильных устройствах
    - Используют `@media` запрос для определения различных стилей для больших размеров экрана

    :::tip[Mobile-first дизайн]
    Начните с определения того, что должно происходить на малых размерах экрана! Маленькие размеры экрана требуют более простых макетов. Затем адаптируйте ваши стили, чтобы учесть более крупные устройства. Если вы сначала спроектируете сложный вариант, потом вам придется потрудиться, чтобы снова сделать его простым.
    :::

    ```css title="src/styles/global.css" ins={23-100}
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }

    /* стили для навигации */

    .nav-links {
      width: 100%;
      top: 5rem;
      left: 48px;
      background-color: #ff9776;
      display: none;
      margin: 0;
    }

    .nav-links a {
      display: block;
      text-align: center;
      padding: 10px 0;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
    }

    .nav-links a:hover,
    .nav-links a:focus {
      background-color: #ff9776;
    }

    .expanded {
      display: unset;
    }

    @media screen and (min-width: 636px) {
      .nav-links {
        margin-left: 5em;
        display: block;
        position: static;
        width: auto;
        background: none;
      }

      .nav-links a {
        display: inline-block;
        padding: 15px 20px;
      }

    }
    ```
</Steps>

Измените размер окна и посмотрите, какие стили применяются при разной ширине экрана. Теперь ваша шапка **адаптивна** к размеру экрана с помощью `@media` запросов.



<Box icon="check-list">

## Чек-лист

<Checklist>
- [ ] Я могу использовать CSS для добавления адаптивных элементов на свой сайт.
</Checklist>
</Box>

### Ресурсы

- [Дизайн основанный на компонентах](https://www.droptica.com/blog/component-based-design/) <Badge>внешняя ссылка</Badge>

- [Семантические теги HTML](https://www.dofactory.com/html/semantics) <Badge>внешняя ссылка</Badge>

- [Mobile-first дизайн](https://www.mobileapps.com/blog/mobile-first-design) <Badge>внешняя ссылка</Badge>